<template>
	<view class="app">
		<view class="Vip">
			<AppNavbar :bgColor="'#fff'" title="POF Premium" titlecolor="#000" leftIconColor="#000" fontWeight="600">
			</AppNavbar>
			<view class="Vip-image flex-center  mt-3">
				<image src="/static/image/Vip/VIP.png" mode=""></image>
			</view>
			<view class="Vip-type flex-between-center mt-3 px-2 ">
				<text class="f-size-14 font-weight-900">Membership type</text>
				<view class="Vip-type-right flex-between-center " @click="goto('/pages/Vip/VipDetail')">
					<text class="f-size-12 color-grey">Privileged particulars</text>
					<image src="../../static/icon/right.png" mode=""></image>
				</view>
			</view>
			<view class="Vip-price flex-between-center px-2 mt-2  ">
				<view class="Vip-price-item flex-center flex-column  " v-for="(item,index) in state.memberList"
					:key="item" :class="{'Vip-price-item-active':state.activeIndex===index}"
					@click="state.activeIndex=index">
					<text class="f-size-16 ">{{item.gradeName}}</text>
					<up-line length="50%" color="#99d399"></up-line>
					<view class="Vip-price-item-price">
						<text class="f-size-16">$</text>
						<text class="f-size-20 ">{{item.yearPrice}}</text>
					</view>
				</view>
			</view>


			<view v-if="!state.payShow">
				<view class="Vip-detail mt-3 ">
					<view class="Vip-detail-content  flex-between-center flex-column">
						<view class="Vip-detail-content-item" v-for="item in 3">
							<image src="../../static/image/success.png" mode=""></image>
							<text>Remote video</text>
						</view>
						<view class="Vip-detail-tip">
							Included in your subscription
						</view>
					</view>
				</view>
				<view class="Vip-tip">
					After re opening, the membership: You will resume the ViPprivilege service, during, the
					membership
					validity period,you can save your favorite videos or photos to your mobile phone album
				</view>
			</view>
			<view v-else>
				<view class="Vip-detail mt-3 ">
					<view class="Vip-detail-content  flex-between-center flex-column">
						<view class="Vip-detail-content-item2 flex-between-center " v-for="item in 3">
							<view class="Vip-detail-content-method">
								<image src="../../static/icon/google.png" mode=""></image>
								<text>Play store</text>
							</view>

							<!-- <text>222</text> -->
							<up-checkbox :customStyle="{marginBottom: '8px'}" name="agree" usedAlone sha shape="circle"
								activeColor="#59b85b">
							</up-checkbox>
						</view>
						<view class="Vip-detail-tip">
							Payment method
						</view>
					</view>
				</view>
				<view class="Vip-tip">
					Read and agree with us before openingVlP members <text @click="gotoAbout(4)">《VIP Member service
						agreement》</text><text @click="gotoAbout(3)">《Privacy
						Policy》</text>
				</view>
			</view>

			<view class="Vip-button ">
				<up-button type="primary" :text="state.text" shape="circle" color="#59b85b" class="f-size-12 "
					style="color: black;" @click="state.payShow=!state.payShow"></up-button>
				<view class="Vip-button-text " @click="goto('/pages/FindPet/album')">
					Plus applicable taxes
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		getMemberListApi
	} from '@/api/member.js'
	const state = reactive({
		text: 'Continue for $59.99 total',
		payShow: false,
		activeIndex: 0,
		memberList: []
	})


	onMounted(async () => {
		const res = await getMemberListApi()
		state.memberList = res.data
		console.log(res);
	})

	function goto(url) {
		uni.$to(url)
	}
	const gotoAbout = (type) => {
		uni.$to('/pages/About/About?type=' + type)
	}
</script>

<style lang="scss" scoped>
	.app {
		.Vip {
			background-color: #fff;

			.Vip-image {
				height: 120px;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.Vip-type-right {
				image {
					position: relative;
					top: 2rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.Vip-price {


				.Vip-price-item {
					justify-content: space-evenly;
					// color: #3c4046;
					border: 1px solid #eeeeee;
					width: 25%;
					height: 140px;

					.Vip-price-item-price {}
				}

				.Vip-price-item-active {
					border-color: #99d399;
				}
			}

			.Vip-detail {
				margin-top: 80rpx;
				position: relative;

				.Vip-detail-content {
					width: calc(100% - 150rpx);
					margin: 0 auto;
					background-color: #ededed;
					border-radius: 30rpx;
					// padding: 30rpx;
					height: 300rpx;
					padding-top: 30rpx;
					box-sizing: border-box;
					justify-content: space-evenly;

					// border: 1px solid;
					.Vip-detail-content-item {
						// justify-content: space-between;
						align-items: center;

						image {
							position: relative;
							top: 3rpx;
							left: -30rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}

					.Vip-detail-content-item2 {
						width: 100%;
						padding: 0 32rpx;
						box-sizing: border-box;

						height: 40px;

						border-bottom: 2px solid #e5e5eb;

						.Vip-detail-content-method {
							display: flex;
							align-items: center;

							image {
								width: 35rpx;
								height: 35rpx;
								margin-right: 20rpx;
							}
						}

						&:nth-of-type(3) {
							border: none;
						}

						// border: 1px solid red;
					}
				}

				.Vip-detail-tip {
					background-color: #59b85b;
					// padding:20rpx 20rpx;
					padding: 15rpx 0;
					width: 380rpx;
					text-align: center;
					position: absolute;
					top: -35rpx;

					font-size: 24rpx;
					border-radius: 30rpx;
					left: 50%;
					transform: translateX(-50%);
				}

			}

			.Vip-tip {
				// border: 1px solid red;
				margin: 40rpx auto;
				width: calc(100% - 150rpx);

				font-size: 22rpx;

				text {
					color: #11e2bd;
				}
			}

			.Vip-button {
				// font-weight: 60;
				margin: 80rpx auto;
				width: calc(100% - 150rpx);

				.Vip-button-text {
					// border: 1px solid red;
					text-align: center;
					font-weight: 900;
					font-size: 22rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>